<template>
  <h2>添加会员权益</h2>
  <table class="table-bordered" border="1">
    <tr>
      <td>权益名称</td>
      <td>
        <input
          type="text"
          placeholder="请输入权益名称"
          v-model="Right.MR_Name"
        />
      </td>
    </tr>
    <tr>
      <td>权益说明</td>
      <td>
        <textarea
          name=""
          placeholder="请输入权益名称"
          v-model="Right.MR_Info"
        ></textarea>
      </td>
    </tr>
    <tr>
      <td>是否自定义:</td>
      <td>
        <input type="radio" value="是" v-model="Right.MR_IsCustom" />是
        <input type="radio" value="否" v-model="Right.MR_IsCustom" />否
      </td>
    </tr>
    <tr>
      <td>规则类型</td>
      <td>
        <input type="radio" :value="0" v-model="Right.MR_RuleType" />折扣
        <input type="radio" :value="1" v-model="Right.MR_RuleType" />餐饮
        <input type="radio" :value="2" v-model="Right.MR_RuleType" />延时
      </td>
    </tr>
    <tr>
      <td>权益规则</td>
      <td>
        <textarea
          placeholder="请输入权益规则"
          v-model="Right.MR_Rule"
        ></textarea>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="text-align: center">
        <input type="button" value="保存" @click="AddMemberRights" />
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref } from "vue";
import axios from "axios";

// 创建响应式数据
const Right = ref({
  MR_Name: "",
  MR_Info: "",
  MR_IsCustom: "",
  MR_RuleType: 0,
  MR_Rule: "",
});

// 保存数据
const AddMemberRights = () => {
  // 验证
  if (Right.value.MR_Name == "") {
    alert("权益名称不能为空");
    return;
  }

  // 权益规则内容不少于6个字符
  if (Right.value.MR_Rule.length < 6) {
    alert("权益规则内容不少于6个字符");
    return;
  }

  // 发送请求
  axios
    .post(
      "https://localhost:7071/api/MemberRights/AddMemberRights",
      Right.value
    )
    .then((res) => {
      if (res.data > 0) {
        alert("添加成功");
      } else if (res.data == -1) {
        alert("权益名称已存在");
      } else {
        alert("添加失败");
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped>
</style>